<template>
  <view class="container">
    <view class="header">
      <view class="back" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="title">健康档案</view>
    </view>
    
    <view class="banner">
      <view class="banner-content">
        <view class="banner-title">个人健康管理中心</view>
        <view class="banner-subtitle">记录健康数据，科学管理身体</view>
      </view>
      <view class="banner-icon">📊</view>
    </view>
    
    <view class="content-block">
      <view class="section-header">
        <view class="section-title">健康检测记录</view>
        <view class="section-more" @tap="viewAllRecords">查看全部</view>
      </view>
      
      <view class="record-list">
        <view class="record-item" v-for="(record, index) in healthRecords.slice(0, 2)" :key="index" @tap="viewRecordDetail(record)">
          <view class="record-icon">{{ getRecordIcon(record.type) }}</view>
          <view class="record-info">
            <view class="record-name">{{ record.name }}</view>
            <view class="record-summary">{{ record.summary }}</view>
            <view class="record-date">{{ formatDate(record.date) }}</view>
          </view>
          <view class="record-indicator" :class="getStatusClass(record.status)">
            <text>{{ record.status }}</text>
          </view>
        </view>
        
        <view v-if="healthRecords.length === 0" class="empty-state">
          <text class="empty-text">暂无检测记录</text>
          <view class="add-record-btn" @tap="addNewRecord">添加检测记录</view>
        </view>
      </view>
    </view>
    
    <view class="content-block">
      <view class="section-header">
        <view class="section-title">健康指标</view>
        <view class="section-more" @tap="updateHealthData">更新</view>
      </view>
      
      <view class="health-data-grid">
        <view class="data-card">
          <view class="data-label">BMI 指数</view>
          <view class="data-value">{{ calculateBMI() }}</view>
          <view class="data-status" :class="getBMIStatusClass()">{{ getBMIStatus() }}</view>
        </view>
        
        <view class="data-card">
          <view class="data-label">血压</view>
          <view class="data-value">{{ healthData.bloodPressure || '--' }}</view>
          <view class="data-status normal">正常</view>
        </view>
        
        <view class="data-card">
          <view class="data-label">血糖</view>
          <view class="data-value">{{ healthData.bloodSugar || '--' }}</view>
          <view class="data-status normal">正常</view>
        </view>
        
        <view class="data-card">
          <view class="data-label">心率</view>
          <view class="data-value">{{ healthData.heartRate || '--' }}</view>
          <view class="data-status normal">正常</view>
        </view>
      </view>
    </view>
    
    <view class="content-block">
      <view class="section-header">
        <view class="section-title">报告管理</view>
        <view class="section-more" @tap="uploadReport">上传报告</view>
      </view>
      
      <view class="report-list">
        <view class="report-item" v-for="(report, index) in medicalReports" :key="index" @tap="viewReportDetail(report)">
          <view class="report-icon">📋</view>
          <view class="report-info">
            <view class="report-title">{{ report.title }}</view>
            <view class="report-subtitle">{{ report.hospital }}</view>
            <view class="report-date">{{ formatDate(report.date) }}</view>
          </view>
          <view class="report-arrow">
            <text>查看</text>
          </view>
        </view>
        
        <view v-if="medicalReports.length === 0" class="empty-state">
          <text class="empty-text">暂无体检报告</text>
        </view>
      </view>
    </view>
    
    <view class="floating-btn" @tap="addNewRecord">
      <text class="plus-icon">+</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      healthRecords: [
        {
          id: 1,
          name: '中医体质辨识',
          type: 'constitution',
          date: new Date('2023-10-15'),
          summary: '气虚质为主，兼有湿热质',
          status: '正常',
          details: '气虚质表现为：容易疲劳，气短，说话无力，自汗，舌淡，脉弱。湿热质表现为：面部油脂分泌旺盛，容易长痘，大便粘滞，舌苔黄腻，脉滑数。'
        },
        {
          id: 2,
          name: '睡眠质量检测',
          type: 'sleep',
          date: new Date('2023-11-20'),
          summary: '轻度睡眠问题',
          status: '异常',
          details: '入睡时间较长，易醒，深度睡眠不足，需要改善。'
        },
        {
          id: 3,
          name: '血压监测',
          type: 'blood-pressure',
          date: new Date('2023-12-05'),
          summary: '收缩压125/舒张压80',
          status: '正常',
          details: '血压稳定，处于正常范围内。'
        }
      ],
      healthData: {
        height: 175,
        weight: 68,
        bloodType: 'A',
        bloodPressure: '120/80',
        bloodSugar: '5.4',
        heartRate: '72',
        constitution: '气虚质',
        updateTime: new Date('2023-12-01')
      },
      medicalReports: [
        {
          id: 1,
          title: '年度体检报告',
          date: new Date('2023-09-05'),
          hospital: '北京协和医院',
          fileUrl: '/static/reports/report-2023.pdf'
        }
      ]
    }
  },
  
  onLoad() {
    this.loadHealthData()
    console.log('健康档案页面加载完成')
  },
  
  methods: {
    // 格式化日期
    formatDate(date) {
      if (!date) return '--'
      const d = new Date(date)
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
    },
    
    // 获取记录图标
    getRecordIcon(type) {
      const icons = {
        'constitution': '👤',
        'sleep': '💤',
        'blood-pressure': '❤️',
        'blood-sugar': '🍬',
        'heart-rate': '💓',
        'other': '📝'
      }
      return icons[type] || icons['other']
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      if (status === '正常') return 'normal'
      if (status === '异常') return 'warning'
      if (status === '严重') return 'danger'
      return ''
    },
    
    // 计算BMI
    calculateBMI() {
      if (!this.healthData.height || !this.healthData.weight) return '--'
      const height = this.healthData.height / 100 // 转换为米
      const bmi = (this.healthData.weight / (height * height)).toFixed(1)
      return bmi
    },
    
    // 获取BMI状态
    getBMIStatus() {
      const bmi = this.calculateBMI()
      if (bmi === '--') return '--'
      if (bmi < 18.5) return '偏瘦'
      if (bmi >= 18.5 && bmi < 24) return '正常'
      if (bmi >= 24 && bmi < 28) return '超重'
      return '肥胖'
    },
    
    // 获取BMI状态样式类
    getBMIStatusClass() {
      const bmi = this.calculateBMI()
      if (bmi === '--') return ''
      if (bmi < 18.5) return 'warning'
      if (bmi >= 18.5 && bmi < 24) return 'normal'
      if (bmi >= 24 && bmi < 28) return 'warning'
      return 'danger'
    },
    
    // 查看记录详情
    viewRecordDetail(record) {
      uni.navigateTo({
        url: `/pages/mine/record-detail?id=${record.id}`,
        fail: (err) => {
          console.error('导航到检测记录详情页失败', err)
          uni.showModal({
            title: record.name,
            content: record.details || '暂无详细内容',
            showCancel: false
          })
        }
      })
    },
    
    // 查看所有记录
    viewAllRecords() {
      uni.showToast({
        title: '查看所有记录功能开发中',
        icon: 'none'
      })
    },
    
    // 添加新记录
    addNewRecord() {
      uni.showActionSheet({
        itemList: ['血压记录', '睡眠质量', '血糖记录', '体重记录', '中医体质辨识'],
        success: (res) => {
          uni.showToast({
            title: '添加记录功能开发中',
            icon: 'none'
          })
        }
      })
    },
    
    // 查看报告详情
    viewReportDetail(report) {
      uni.navigateTo({
        url: `/pages/mine/report-detail?id=${report.id}`,
        fail: (err) => {
          console.error('导航到体检报告详情页失败', err)
          uni.showToast({
            title: '查看报告: ' + report.title,
            icon: 'none'
          })
        }
      })
    },
    
    // 更新健康数据
    updateHealthData() {
      uni.showToast({
        title: '更新健康数据功能开发中',
        icon: 'none'
      })
    },
    
    // 上传报告
    uploadReport() {
      uni.showToast({
        title: '上传报告功能开发中',
        icon: 'none'
      })
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 加载健康数据
    loadHealthData() {
      try {
        // 从本地存储获取健康数据
        const storedData = uni.getStorageSync('healthData')
        if (storedData) {
          this.healthData = {
            ...this.healthData,
            ...storedData
          }
          console.log('加载健康数据成功:', this.healthData)
        }
      } catch (error) {
        console.error('获取健康数据失败:', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  padding: 30rpx;
  background-color: #f5f5f5;
  position: relative;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  
  .back {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    
    .back-icon {
      font-size: 40rpx;
      color: #333;
    }
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.banner {
  background: linear-gradient(135deg, #32CD32, #4CAF50);
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .banner-content {
    flex: 1;
    
    .banner-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 8rpx;
    }
    
    .banner-subtitle {
      font-size: 24rpx;
      opacity: 0.9;
    }
  }
  
  .banner-icon {
    font-size: 60rpx;
    margin-left: 20rpx;
  }
}

.content-block {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    border-left: 6rpx solid #32CD32;
    padding-left: 14rpx;
  }
  
  .section-more {
    font-size: 24rpx;
    color: #32CD32;
  }
}

.record-list {
  .record-item {
    display: flex;
    align-items: center;
    padding: 16rpx 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .record-icon {
      font-size: 40rpx;
      margin-right: 16rpx;
      width: 60rpx;
      text-align: center;
    }
    
    .record-info {
      flex: 1;
      
      .record-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 6rpx;
      }
      
      .record-summary {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 4rpx;
      }
      
      .record-date {
        font-size: 22rpx;
        color: #999;
      }
    }
    
    .record-indicator {
      padding: 4rpx 14rpx;
      font-size: 22rpx;
      border-radius: 30rpx;
      
      &.normal {
        background-color: #e8f5e9;
        color: #32CD32;
      }
      
      &.warning {
        background-color: #fff8e1;
        color: #ffa000;
      }
      
      &.danger {
        background-color: #ffebee;
        color: #f44336;
      }
    }
  }
}

.health-data-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
  
  .data-card {
    background-color: #f9f9f9;
    border-radius: 10rpx;
    padding: 16rpx;
    
    .data-label {
      font-size: 24rpx;
      color: #666;
      margin-bottom: 6rpx;
    }
    
    .data-value {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 6rpx;
    }
    
    .data-status {
      font-size: 22rpx;
      padding: 2rpx 10rpx;
      border-radius: 20rpx;
      display: inline-block;
      
      &.normal {
        background-color: #e8f5e9;
        color: #32CD32;
      }
      
      &.warning {
        background-color: #fff8e1;
        color: #ffa000;
      }
      
      &.danger {
        background-color: #ffebee;
        color: #f44336;
      }
    }
  }
}

.report-list {
  .report-item {
    display: flex;
    align-items: center;
    padding: 16rpx 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .report-icon {
      font-size: 40rpx;
      margin-right: 16rpx;
    }
    
    .report-info {
      flex: 1;
      
      .report-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 4rpx;
      }
      
      .report-subtitle {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 4rpx;
      }
      
      .report-date {
        font-size: 22rpx;
        color: #999;
      }
    }
    
    .report-arrow {
      font-size: 24rpx;
      color: #32CD32;
      background-color: rgba(50, 205, 50, 0.1);
      padding: 6rpx 14rpx;
      border-radius: 6rpx;
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 20rpx;
  }
  
  .add-record-btn {
    font-size: 26rpx;
    color: #32CD32;
    border: 1px solid #32CD32;
    padding: 10rpx 30rpx;
    border-radius: 30rpx;
  }
}

.floating-btn {
  position: fixed;
  right: 30rpx;
  bottom: 100rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #32CD32;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(50, 205, 50, 0.4);
  
  .plus-icon {
    font-size: 50rpx;
    color: #fff;
    font-weight: bold;
  }
}
</style> 